<!-- 个人中心 -->
<template>
    <div class="my">
        <el-card style="width:60%">
            <el-form :model="form" ref="forms" :rules="rules">
                <el-form-item label="">
                    <el-upload class="avatar-uploader" action="/api/file/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.userAccount" disabled />
                </el-form-item>
                <el-form-item label="昵称" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="电话" prop="userTel">
                    <el-input v-model="form.userTel" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item>
                    <el-popconfirm title="您确定修改您的个人信息吗?" @confirm="handleSave" icon="Delete" icon-color="red" width="220px">
                        <template #reference>
                            <el-button type="primary">保存修改</el-button>
                        </template>
                    </el-popconfirm>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import useUserStore from '../../store/modules/user';
import type { UploadProps } from 'element-plus'
import { UserInfo } from '../../api/user/type';
import { reqUpdateMyInfo } from '../../api/user/index'
let userStore = useUserStore()
const imageUrl = ref('')
let form = reactive<UserInfo>({
    avatarUrl: '',
    userAccount: '',
    username: '',
    userTel: '',
    email: ''
})
let forms = ref()


const validateUsername = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('昵称不能为空'))
    } else {
        if (form.username !== '') {
            if (value.length > 2) {
                if (value.length < 10) {
                    callback()
                } else {
                    callback(new Error('昵称长度不能超过10位'))
                }
            } else {
                callback(new Error('昵称长度不能少于2位'))
            }
        }
    }
}
const validateUserTel = (rule: any, value: any, callback: any) => {
    let reg = /^1[3|4|5|8][0-9]\d{4,8}$/
    if (value === '') {
        callback(new Error('请输入电话号码'));
    } else if (!reg.test(value)) {
        callback(new Error('手机号码格式不正确，请输入11位手机号'));
    } else {
        callback();
    }
}
const validateEmail = (rule: any, value: any, callback: any) => {
    let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.\w{2,}$/
    if (value === '') {
        callback(new Error('请输入邮箱'));
    } else if (!reg.test(value)) {
        callback(new Error('邮箱格式不正确'));
    } else {
        callback();
    }
}
const rules = {
    username: [{ validator: validateUsername, trigger: 'blur' }],
    userTel: [{ validator: validateUserTel, trigger: 'blur' }],
    email: [{ validator: validateEmail, trigger: 'blur' }]
}


onMounted(() => {
    Object.assign(form, userStore.user)
})


const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    form.avatarUrl = response.data.url

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/jfif') {
        if (rawFile.size / 1024 / 1024 < 2) {
            return true
        } else {
            ElMessage.error('上传照片的大小不能超过2MB!')
            return false
        }
    } else {
        ElMessage.error('上传的照片格式必须为PNG | JPEG | JFIF!')
        return false
    }
}
// 
const handleSave = async () => {
    await forms.value.validate()
    let result: any = await reqUpdateMyInfo(form)
    if (result.code == 20000) {
        await userStore.userInfo()
        Object.assign(form, userStore.user)
    }

}
</script>

<style lang="scss" scoped>
.my {
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar-uploader {
        width: 178px;
        height: 178px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;

        .avatar {
            width: 178px;
            height: 178px;
            border-radius: 50%;
        }
    }

    .el-form {
        padding: 20px 100px;
    }

    .el-button {
        margin: 0 auto;
    }

}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed transparent;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: transparent;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    text-align: center;
}
</style>